<template>
  <div id='commodity_edit'>
    <Row type='flex'
         justify='center'
         style="padding:60px 100px">
      <Col style="width: 1200px;">
      <Steps :current="current">
        <Step title="选择商品分类"
              class="prev"></Step>
        <Step title="填写商品信息"
              class="prev"></Step>
        <Step title="填写属性信息"
              class="prev"></Step>
        <Step title="完成"
              class="complate"></Step>
      </Steps>
      </Col>
    </Row>
    <div class="first-level content-style"
         v-show='current === 0'
         style="width: 850px">
      <div class="title">
        <p></p>
        <span>商品分类</span>
      </div>
      <Form ref="formValidate1"
            :model="formValidate1"
            :rules="ruleValidate1"
            :label-width="85"
            style="width: 850px;">
        <FormItem label="所属类型："
                  prop="involvedType">
          <Select v-model="formValidate1.involvedType"
                  :disabled="copyDisable"
                  @on-change="seletcType"
                  class='input-wid'
                  style="width: 260px">
            <Option v-for="(item, index) in involvedTypeList"
                    :value="item.typeCode"
                    :key="index">{{item.typeName}}</Option>
          </Select>
        </FormItem>
        <FormItem label="所属分类："
                  prop="involvedClassify">
          <div style="display: flex;">
            <div class="classify-content">
              <div class="section-content">
                <p>选择一级分类</p>
                <ul style="overflow-y: auto;height: 222px;cursor:pointer"
                    ref="setion">
                  <li v-for='(first,idx) in firstList'
                      :key='idx'
                      :class="active===idx?'selected':''"
                      @click='selectFirstClassify(first,idx)'>
                    <span>{{first.categoryName}}</span>
                    <Icon type="ios-arrow-forward"
                          size='16' />
                  </li>
                </ul>
              </div>
              <div style="margin: 0 40px;">
                <!-- <Button type="primary">
                      <Icon type="ios-arrow-forward" />
                  </Button> -->
              </div>
              <div class="section-content">
                <p>选择二级分类</p>
                <ul style="overflow-y: auto;height: 222px;cursor:pointer"
                    ref="setionTwo">
                  <li v-for='(second,idx) in secondList'
                      :key='idx'
                      :class="active2===idx?'selected':''"
                      @click='selectSecondClassify(second,idx)'>{{second.categoryName}}</li>
                </ul>
              </div>
            </div>
            <div style="display: flex;align-items: center;margin-left: 30px;height: 32px;color: #2D8CF0; cursor: pointer;"
                 @click="addcategroy">
              <Icon type="ios-add-circle"
                    size='20' /><span>新增分类</span>
            </div>
          </div>
          <div>您当前选择的商品类别是：<span style="color:rgb(242,90,83)">{{formValidate1.involvedClassify[0].categoryName}}{{formValidate1.involvedClassify[1]?'>':''}}{{formValidate1.involvedClassify[1].categoryName}}</span></div>
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click='submitOne'>下一步</Button>
        </FormItem>
      </Form>
    </div>
    <div class="second-level content-style"
         v-show='current === 1'
         style="width: 850px">
      <div class="title">
        <p></p>
        <span>商品信息</span>
      </div>
      <Form inline
            ref="formValidate2"
            :model="formValidate2"
            :rules="ruleValidate2"
            :label-width="95"
            style="width: 850px;">
        <FormItem label="商品分类："
                  prop="productClassify">
          <Input v-model="formValidate2.productClassify"
                 placeholder="请输入"
                 style="width: 118px"
                 disabled></Input>
          <span style="color:#DCDEE2;margin: 0 8px">-</span>
          <Input v-model="formValidate2.productClassify2"
                 placeholder="请输入"
                 style="width: 118px"
                 disabled></Input>
          <span style="color: #2D8CF0;margin-left: 8px;cursor:pointer"
                @click='skipTwo'>编辑</span>
        </FormItem>
        <FormItem label="是否虚拟商品："
                  prop="isShow"
                  :label-width='180'>
          <RadioGroup v-model="formValidate2.isShow"
                      size="large">
            <Radio label="1">是</Radio>
            <Radio label="0"
                   style="margin-left:50px">否</Radio>
          </RadioGroup>
        </FormItem>
        <!-- <FormItem label="所属类型：" prop="relateType" :style="formValidate1.involvedType === '3' && formValidate2.businessType !=='7' ? styles : ''"> -->
        <FormItem label="所属类型："
                  prop="relateType">
          <Input :value="formValidate2.relateType"
                 placeholder="请输入"
                 style="width: 255px"
                 disabled></Input>
          <!-- <Select v-model="formValidate2.relateType"
                  class='input-wid'
                  style='width:255px'
                  v-if="!copyDisable">
            <Option v-for="(item, index) in relateTypeList"
                    :value="item.typeCode"
                    :key="index">{{item.typeName}}</Option>
          </Select> -->
        </FormItem>
        <FormItem label="营业项分类："
                  v-if="formValidate1.involvedType==='03'"
                  prop="businessType"
                  :label-width='180'>
          <Select v-model="formValidate2.businessType"
                  @on-change="selecebusinessType"
                  :disabled='copyDisable'
                  class='input-wid'
                  style='width:255px'>
            <Option v-for="(item, index) in businessTypeList"
                    :value="item.typeCode"
                    :key="index">{{item.typeName}}</Option>
          </Select>
        </FormItem>
        <FormItem label="收款项分类："
                  v-if="formValidate1.involvedType==='03'&&formValidate2.businessType==='0301'"
                  prop="gatherPrice">
          <!-- <Input :value="formValidate2.gatherPrice"
                 placeholder="请输入"
                 style="width: 255px"
                 disabled></Input> -->
          <Select v-model="formValidate2.gatherPrice"
                  @on-change="selecebusinessType01"
                  class='input-wid'
                  style='width:255px'>
            <Option v-for="(item, index) in gatherPriceList"
                    :value="item.typeCode"
                    :key="index">{{item.typeName}}</Option>
          </Select>
        </FormItem>
        <FormItem label="所属门店："
                  :label-width="formValidate1.involvedType==='03'&&formValidate2.businessType!=='0301'? 95: 180"
                  prop="involvedShop"
                  :rules="{required:true, message: '门店不能为空', trigger: 'blur'}"
                  v-if="formValidate1.involvedType==='03'">
          <!-- <Select v-model="formValidate2.involvedShop"
                  class='input-wid'
                  :disabled="copyDisable"
                  style='width:255px'>
            <Option v-for="(item, index) in involvedShopList"
                    :value="item.shopId"
                    :key="index">{{item.shopName}}</Option> -->
          <treeselect :options="options"
                      @select="selectListd"
                      class='input-wid'
                      :clearable="clearable"
                      :disabled="copyDisable"
                      :disable-branch-nodes="true"
                      style='width:255px'
                      :normalizer="normalizer"
                      noResultsText="未搜索符合的门店"
                      noOptionsText="门店为空"
                      placeholder="请选择门店"
                      v-model='formValidate2.involvedShop' />
          <!-- </Select> -->
        </FormItem>
        <FormItem label="对应分类："
                  prop="matchClassify"
                  v-if="formValidate1.involvedType!=='03'"
                  :label-width='180'>
          <Select v-model="formValidate2.matchClassify"
                  @on-change="seletcType2"
                  :disabled="copyDisable"
                  class='input-wid'
                  style='width:255px'>
            <Option v-for="(item, index) in matchClassifyList"
                    :value="item.typeCode"
                    :key="index">{{item.typeName}}</Option>
          </Select>
        </FormItem>
        <Row>
          <FormItem label="商品名称："
                    prop="skuName">
            <Input v-model="formValidate2.skuName"
                   :maxlength="12"
                   @on-keyup="keyupskuName"
                   placeholder="请输入"
                   style="width: 255px"></Input>
          </FormItem>
          <FormItem label="副标题："
                    prop="subTitle"
                    :label-width='180'>
            <Input v-model="formValidate2.subTitle"
                   :maxlength="24"
                   @on-keyup="keyupsubTitle"
                   placeholder="请输入"
                   style="width: 255px"></Input>
          </FormItem>
        </Row>
        <FormItem label="价格："
                  prop="price"
                  v-if="formValidate1.involvedType==='02'">
          <Select v-model="formValidate2.price"
                  class='input-wid'
                  :disabled="copyDisable"
                  style='width:255px'>
            <Option v-for="(item, index) in priceList"
                    :value="item.id"
                    :key="index">{{item.configValue}}</Option>
          </Select>
        </FormItem>
        <FormItem label="局数："
                  prop="games"
                  v-if="formValidate1.involvedType==='02'"
                  :label-width='180'>
          <Select v-model="formValidate2.games"
                  class='input-wid'
                  :disabled="copyDisable"
                  style='width:255px'>
            <Option v-for="(item, index) in gamesList"
                    :value="item.id"
                    :key="index">{{item.configValue}}</Option>
          </Select>
        </FormItem>
        <FormItem label="销售形式："
                  v-if="formValidate1.involvedType==='02'"
                  prop="saleType"
                  style="display: block;">
          <Select v-model="formValidate2.saleType"
                  class='input-wid'
                  style='width:255px'>
            <Option v-for="(item, index) in saleTypeList"
                    :value="item.value"
                    :key="index">{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem label="商品介绍："
                  prop="goodsDesc"
                  style="display: block;">
          <Input v-model="formValidate2.goodsDesc"
                 style="width: 700px"
                 :maxlength="256"
                 type="textarea"
                 :autosize="{ minRows: 4, maxRows: 8 }"
                 placeholder="请描述"
                 class="Row_content_input"></Input>
        </FormItem>
        <FormItem label="商品条码："
                  prop="barcode">
          <Input v-model="formValidate2.barcode"
                 placeholder="请输入"
                 @on-keyup="keyup"
                 :maxlength="13"
                 style="width: 255px"></Input>
          <p style="color: #808695;">如果不输入商品条码，系统将自动生成一个唯一13位编码</p>
        </FormItem>
        <FormItem label="商品编码："
                  prop="skuId"
                  v-if="copyDisable"
                  :label-width='133'>
          <Input v-model="formValidate2.skuId"
                 :disabled="copyDisable"
                 placeholder="请输入"
                 style="width: 255px"></Input>
          <p style="color: #808695;">系统将自动生成一个唯一的货号</p>
        </FormItem>
        <FormItem label="售卖价格："
                  prop="salesPrice"
                  v-if="formValidate1.involvedType==='03'">
          <Input v-model="formValidate2.salesPrice"
                 placeholder="请输入"
                 :maxlength="9"
                 @on-keyup="changeprice"
                 @on-blur="priceBlur"
                 style="width: 255px"></Input>
        </FormItem>
        <FormItem label="商品单位："
                  prop="goodsUnit">
          <Select v-model="formValidate2.goodsUnit"
                  disabled
                  class='input-wid'
                  style='width:255px'>
            <Option v-for="(item, index) in goodsUnitList"
                    :value="item.value"
                    :key="index">{{item.label}}</Option>
          </Select>
        </FormItem>
        <div v-if="formValidate1.involvedType==='01'&&formValidate2.matchClassify==='0104'">
          <div class="title"
               style="margin-top:50px">
            <p></p>
            <span>组合商品</span>
          </div>
          <FormItem label="套餐类型："
                    prop="mealType">
            <Input v-model="formValidate2.mealType"
                   disabled
                   v-if="copyDisable"
                   class='input-wid' />
            <Select v-model="formValidate2.mealType"
                    @on-change="selectmealType"
                    v-if="!copyDisable"
                    class='input-wid'
                    style='width:255px'>
              <Option v-for="(item, index) in mealTypeList"
                      :value="item.typeCode"
                      :key="index">{{item.typeName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="游戏券："
                    prop="selectedMeal"
                    v-if="formValidate2.mealType==='混合套餐'||formValidate2.mealType==='010403'"
                    :label-width='180'>
            <Button @click="addmeal">添加游戏券
              <Icon type="ios-add"
                    size='20' /></Button>
          </FormItem>
          <FormItem label="所选列表：">
            <Table border
                   :columns="columnsMeal"
                   style="width:800px;"
                   :data="formValidate2.selectedMeal">
              <template slot-scope="{ row }"
                        slot="unit">
                <span>{{['个','枚','份'][row.goodsUnit]}}</span>
              </template>
              <template slot-scope="{ row,index }"
                        slot="code">
                <div style="cursor:pointer">
                  <!-- <span style="cursor:pointer"
                        v-if="row.isshow"> -->
                  <Input v-model="row.num"
                         :maxlength="4"
                         ref="inputValidate"
                         :disabled="(formValidate2.mealType==='010402'&&row.skuName==='会员卡')||(formValidate2.mealType==='办卡套餐'&&row.skuName==='会员卡')||(formValidate2.mealType==='010403'&&row.skuName!=='游戏币')||(formValidate2.mealType==='混合套餐'&&row.skuName!=='游戏币')"
                         @on-keyup.stop="ketupsort(row.num,row,index)"
                         @on-blur.stop="blursort(row,row.num,index)" />
                  <!-- </span>
                  <span @click.stop="selectsort(row,index)"
                        style="cursor:pointer;display:block;"
                        v-if="!row.isshow">{{row.num}}</span> -->
                </div>

                <!-- <div v-if="!row.isshow"
                     @click="seletccode(row,index)">
                  <span>{{row.num}}</span>
                </div>
                <div v-if="row.isshow"><Input v-model="row.num"
                         placeholder="请输入" /></div> -->
              </template>
              <template slot-scope="{ row,index }"
                        slot="action">
                <Poptip confirm
                        title="你确定要删除吗？"
                        v-if="row.skuName !== '游戏币' && row.skuName !== '会员卡'"
                        @on-ok="ok(index)"
                        @on-cancel="cancel">
                  <i class="iconsys icondel"
                     title="删除">
                  </i>
                </Poptip>
              </template>
            </Table>
          </FormItem>
        </div>
        <div>
          <div class="title"
               style="margin-top:50px">
            <p></p>
            <span>运营信息</span>
          </div>
          <FormItem label="商品关键词："
                    prop="keywords"
                    style="display: block;">
            <Row type='flex'
                 align='bottom'>
              <Col>
              <Input v-model="formValidate2.keywords"
                     style="width: 320px"
                     type="textarea"
                     :maxlength="300"
                     :autosize="{ minRows: 4, maxRows: 8 }"
                     placeholder="请描述"
                     class="Row_content_input"></Input>
              </Col>
              <Col>
              <p style="margin-left: 10px;height: 25px;">{{formValidate2.keywords?formValidate2.keywords.length:0}}/300</p>
              </Col>
            </Row>
            <p style="color: #808695;font-size: 12px;">商品关键词请用空格分隔；有两个功能，一是可以作为站内关键词查询，在前台搜索框输入关键词后，能够搜索到该商品；二是作为搜索引擎收录使用.</p>
          </FormItem>
          <FormItem label="商品备注："
                    prop="remark"
                    style="display: block;">
            <Row type='flex'
                 align='bottom'>
              <Col>
              <Input v-model="formValidate2.remark"
                     style="width: 320px"
                     type="textarea"
                     :maxlength="300"
                     :autosize="{ minRows: 4, maxRows: 8 }"
                     placeholder="请描述"
                     class="Row_content_input"></Input>
              </Col>
              <Col>
              <p style="margin-left: 10px;height: 25px;">{{formValidate2.remark?formValidate2.remark.length:0}}/300</p>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="游戏币数量："
                    v-if="formValidate1.involvedType==='01'&&formValidate2.matchClassify==='0102'"
                    prop="tableDataGameCoin"
                    style="display: block;">
            <Table border
                   :columns="columnsMeal"
                   :data="formValidate2.tableDataGameCoin">
              <template slot-scope="{ row }"
                        slot="unit">
                <span>{{['个','枚','份'][row.goodsUnit+'']}}</span>
              </template>
              <template slot-scope="{ row,index }"
                        slot="code">
                <div style="cursor:pointer">
                  <!-- <span style="cursor:pointer"
                        v-if="row.isshow"> -->
                  <Input v-model="row.num"
                         :maxlength="4"
                         ref="inputValidated"
                         @on-keyup.stop="ketupsort2(row.num,row,index)"
                         @on-blur.stop="blursort2(row,row.num,index)" />
                  <!-- </span>
                  <span @click.stop="selectsort2(row,index)"
                        style="cursor:pointer;display:block;"
                        v-if="!row.isshow">{{row.num}}</span> -->
                </div>
              </template>
              <template slot-scope="{ row,index }"
                        slot="action">
                <Poptip confirm
                        v-if="row.skuName !== '游戏币'"
                        title="你确定要删除吗？"
                        @on-ok="ok(index)"
                        @on-cancel="cancel">
                  <i class="iconsys icondel"
                     title="删除">
                  </i>
                </Poptip>
              </template>
            </Table>
          </FormItem>
          <FormItem>
            <div style="margin-top: 20px">
              <Button class="btn"
                      @click="skipTwo">上一步</Button>
              <Button type="primary"
                      class="btn"
                      style="margin-left: 24px"
                      @click="submitTwo">下一步</Button>
            </div>
          </FormItem>
        </div>
      </Form>
    </div>
    <div class="third-level content-style"
         v-show='current === 2'
         style="width: 910px;">
      <Form ref="formValidate3"
            :model="formValidate3"
            :rules="ruleValidate3"
            :label-width="200"
            style="width: 910px;">
        <div v-if="porLen>0">
          <div class="title">
            <p></p>
            <span>属性参数</span>
          </div>
          <FormItem label="相关参数："
                    prop="relateParam">
            <Form :label-width="200"
                  ref="formDynamic"
                  :model="formDynamic">
              <div style='display:flex;background: #F3F3F3;'>
                <p style='width: 224px;text-align:right;border:1px solid #DCDEE2;padding-right:10px'>参数类型</p>
                <p style='border:1px solid #DCDEE2;flex:1;text-align:center;border-left: 0'>录入参数</p>
              </div>
              <FormItem :label="item.valueId"
                        v-for="(item,idx) in formDynamic.list"
                        :key='idx'
                        :prop="'list.' + idx + '.value'"
                        :rules="{required: item.notNull === 1 ? true : false, message: item.inputType === 0 ? '请输入参数值': '请选择参数值',type: item.inputType === 2 ? 'array': 'string', trigger: 'change'}"
                        style='padding:20px;border:1px solid #DCDEE2;border-top:0'>
                <Input style="width:260px"
                       v-if="item.inputType === 0"
                       :maxlength="20"
                       @on-blur="selectinputtype(...arguments, item)"
                       v-model="item.value"></Input>
                <Select style="width:260px"
                        v-if="item.inputType === 1 || item.inputType === 2"
                        :multiple="item.inputType === 2? true: false"
                        @on-change="selcteinput(...arguments, item)"
                        v-model="item.value">
                  <Option v-for="(ele,index) in item.selectList"
                          :value="ele.propValueId"
                          :key="index">{{ ele.propValue}}</Option>
                </Select>
              </FormItem>
            </Form>
          </FormItem>
        </div>
        <div>
          <div class="title">
            <p></p>
            <span>商品相册</span>
          </div>
          <FormItem label="上传图片："
                    prop="loadImg">
            <Row type="flex">
              <Col>
              <div class="demo-upload-list"
                   style="display:flex">
                <div v-for="(item,idx) in uploadList"
                     :key='idx'
                     style="position: relative;position:relative;">
                  <div style="margin-right: 20px">
                    <div style="font-size: 12px;color: #FFFFFF;border: 1px solid #FFFFFF;border-radius: 2px;width:56px;height:20px;line-height:20px;text-align:center;position:absolute;top:4px;left:4px;background: #e7314e;"
                         v-if="idx===0">商品主图</div>
                    <img :src="item.multUrl"
                         style="display: inline-block;width:96px;height:96px;vertical-align: top;cursor:pointer">
                  </div>
                  <div style="text-align: center;width:96px;margin-left:18px;cursor:pointer"
                       v-if="idx!==0">
                    <p style='width: 60px;height: 24px;line-height: 24px;background: #2D8CF0;border-radius: 2px;color:#fff;margin-top:8px'
                       @click="setmaster(idx,item)">设为主图</p>
                  </div>
                  <div class="demo-upload-list-cover"
                       @click="removelist(idx)"
                       style="position: absolute; left: 0;top: 72px;background: #ED4014;opacity: 0.6;width:96px;height: 24px;line-height: 24px;color: #fff;text-align: center;cursor:pointer">
                    <span>删除</span>
                  </div>
                </div>
              </div>
              </Col>
              <Col>
              <Upload ref="upload"
                      :show-upload-list="false"
                      :default-file-list="defaultList"
                      :on-success="handleSuccess"
                      :format="['jpg','jpeg','png']"
                      :max-size="5120"
                      :on-format-error="handleFormatError"
                      :on-exceeded-size="handleMaxSize"
                      :before-upload="handleBeforeUpload"
                      multiple
                      type="drag"
                      :action="$config.uploadImg"
                      style="display: inline-block;width:96px;">
                <div>
                  <img :src="defaultUrl"
                       alt=""
                       style="display: inline-block;width:96px;height:96px;vertical-align: top;">
                </div>
              </Upload>
              </Col>
              <Col>
              <div style="width:132px;height:72px;line-height:18px;color: #464C5B;margin-left:16px">
                <p>建议上传图片800*800px</p>
                <p>格式支持上传jpg、png</p>
                <p>图片限制最大5M</p>
              </div>
              </Col>
            </Row>
          </FormItem>
        </div>
        <div>
          <div class="title">
            <p></p>
            <span>商详信息</span>
          </div>
          <FormItem label="商品详情："
                    prop="productDetail">
            <div ref="addEditor"
                 class="rich-editor"></div>
          </FormItem>
          <FormItem>
            <div style="margin-top: 20px">
              <Button class="btn"
                      @click="skipThree">上一步</Button>
              <Button type="primary"
                      class="btn"
                      style="margin-left: 24px"
                      @click="submitThree">下一步</Button>
            </div>
          </FormItem>
        </div>
      </Form>
    </div>
    <div class="four-level content-style"
         style="width: 120px;text-align: center;padding-top: 50px"
         v-show='current === 3'>
      <div style="color: #18BE6B;">
        <Icon type="ios-checkmark-circle-outline"
              size='35' />
      </div>
      <h3 style="margin: 10px 0 50px 0">完成商品添加({{num}})秒</h3>
      <Button type="primary"
              @click='skipList'>返回商品列表</Button>
    </div>
    <select-shop :checkdList="checkdList"
                 :modalShow="modalShow"
                 :tpyeIndex="seletIndex3"
                 @oncancel="selctshopCancel"
                 @selctshop="volumeSet"
                 v-if="modalShow">
    </select-shop>
  </div>
</template>

<script>
// import { routeEqual } from '@/libs/util'
import SelectShop from '@/view/components/selet-securities/selet-securities.vue'
import editor from '../../market/game-ticket/mixins.js'
import { kindList, shopCategoryList, configList, goodsList, propertyList, editGoodsList, getGoodsDetail, creatGoodsList, porbaoList } from '@/api/goods/index'
// import { getShopList } from '@/api/system/store'
import { getOrgAllTree } from '@/api/system/org'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'commodity_edit',
  components: { SelectShop, Treeselect },
  mixins: [editor],
  watch: {
    modalShow (val) {
    },
    current (val) {
      if (this.current === 1) {
        if (!this.copyDisable) {
          this.formValidate2.relateType = this.involvedTypeList[this.seletIndex].typeName
        }
        this.formValidate2.productClassify = this.formValidate1.involvedClassify[0].categoryName
        this.formValidate2.productClassify2 = this.formValidate1.involvedClassify[1].categoryName
        this.getConfigList()
        this.getShopList()
      } else if (this.current === 2) {
      } else if (this.current === 3) {
        this.num = 3
        this.timer = setInterval(() => {
          this.num--
          if (this.num === 0) {
            clearInterval(this.timer)
            this.handleReset()
          }
        }, 1000)
      }
    },
    // packageId (val) {
    //   if (val) {
    //     this.formDynamic.list = []
    //     this.editPropertyList()
    //   } else {
    //     this.formDynamic.list = []
    //   }
    // },
    'formValidate1.involvedType' (val) {
      // if (val === '1') {
      //   this.matchClassifyList = this.matchGameCoinList
      // } else if (val === '2') {
      //   this.formValidate2.matchClassify = ''
      //   this.matchClassifyList = this.matchGameTicketList
      // } else if (val === '3') {
      //   this.formValidate2.matchClassify = ''
      // }
    }
  },
  computed: {
    isUnit: function () {
      if (this.seletIndex === 0 || this.seletIndex === 1) return true
      return false
    },
    porLen () {
      return this.formDynamic.list.length
    },
    copyDisable () {
      return !this.copyids
    }
  },
  data () {
    return {
      arrData: [],
      packageId: '',
      box: '',
      options: [],
      scroll: '',
      normalizer (node) {
        return {
          id: node.id,
          label: node.orgName,
          children: node.childList && node.childList.length ? node.childList : undefined
        }
      },
      formDynamic: {
        list: []
      },
      timer: '',
      copyids: '',
      num: 3,
      parentCategoryName: '', // 父类的名称
      current: 0,
      defaultUrl: require('@/assets/images/add.png'),
      defaultList: [],
      active: '',
      active2: 0,
      uploadList: [],
      typeIDOne: '', // 类型id
      typeIDTwo: '',
      typeIDThree: '',
      checkdList: [],
      itemList: [],
      shopId: '',
      modalShow: false,
      seletIndex: 0, // 所属类型1
      seletIndex2: 0, // 对应分类
      seletIndex3: 0, // 套餐
      seletIndex4: 0, // 营业项分类
      involvedTypeList: [],
      goodsKindList: [], // 商品业务类别
      editGoodsKindList: [],
      multUrlList: [], // 商品图片url列表
      propertyList: [], // 属性参数列表
      propertiesData: [], // 属性参数
      goodsComboList: [], // 子商品列表,
      firstList: [],
      categoryId: '', // 类目id
      categoryName: '', // 类目名称
      newpackId: '',
      oldpackId: '',
      secondList: [
      ],
      maxTagPlaceholder (num) {
        return '...'
      },
      formValidate1: {
        involvedType: '', // 所属类型
        involvedClassify: ['', ''] // 所属分类
      },
      ruleValidate1: {
        involvedType: { required: true, message: '请选择所属类型', trigger: 'change' },
        involvedClassify: {
          required: true,
          type: 'array',
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (value[0] !== '' && value[1] !== '') {
              callback()
            } else {
              callback(new Error('请选择所属分类'))
            }
          }
        }
      },
      relateTypeList: [],
      matchClassifyList: [],
      businessTypeList: [],
      mealTypeList: [],
      goodsUnitList: [
        { value: 0, label: '个' },
        { value: 1, label: '枚' },
        { value: 2, label: '份' }
      ],
      columnsMeal: [
        {
          title: '商品条码',
          key: 'barcode',
          width: 200
        },
        {
          title: '商品名称',
          key: 'skuName',
          width: 200
        },
        {
          title: '单位',
          slot: 'unit'
        },
        {
          title: '数量',
          slot: 'code'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      clearable: false,
      formValidate2: {
        productClassify: '',
        productClassify2: '',
        isShow: '',
        relateType: '',
        matchClassify: '1',
        skuName: '', // 商品名称
        subTitle: '', // 副标题
        goodsDesc: '', // 商品介绍
        barcode: '', // 商品条码
        skuId: '', // 商品编码
        goodsUnit: '', // 商品单位
        keywords: '', // 商品关键词
        remark: '', // 商品备注
        mealType: '', // 套餐类型
        selectedMeal: [], // 所选列表
        tableDataGameCoin: [], // 游戏币数量
        price: '', // 价格
        games: '', // 局数
        saleType: '', // 销售形式
        businessType: '', // 营业项分类
        salesPrice: '', // 售卖价格
        gatherPrice: '', // 收款项分类
        involvedShop: null // 所属门店
      },
      ruleValidate2: {
        // productClassify: { required: true, message: '请选择商品分类', trigger: 'change' },
        isShow: { required: true, message: '请选择是否虚拟商品', trigger: 'change' },
        // relateType: { required: true, message: '请选择所属类型', trigger: 'blur' },
        matchClassify: { required: true, message: '对应分类不能为空', trigger: 'change' },
        barcode: {
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (!value) {
              callback()
            } else if (value) {
              if (value.length !== 13) {
                callback(new Error('请输入13个字符的商品条码'))
              } else {
                callback()
              }
            }
          }
        },
        // skuId: { required: true, message: '商品编码不能为空', trigger: 'blur' },
        goodsUnit: { required: true, message: '商品单位不能为空', trigger: 'change', type: 'number' },
        businessType: { required: true, message: '请选择营业项分类', trigger: 'change' },
        mealType: { required: true, message: '请选择套餐类型', trigger: 'change' },
        skuName: { required: true, message: '请填写商品名称', trigger: 'blur' },
        selectedMeal: {
          required: true,
          type: 'array',
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (this.formValidate2.mealType === '010403' || this.formValidate2.mealType === '混合套餐') {
              if (value.length > 2 || value.length === 2) {
                callback()
              } else {
                callback(new Error('请选择游戏劵'))
              }
            } else {
              if (value.length > 0) {
                callback()
              } else {
                callback(new Error('请选择游戏劵'))
              }
            }
          }
        },
        gatherPrice: { required: true, message: '请选择收款项分类', trigger: 'change' },
        salesPrice: { required: true, message: '请选择售卖价格', trigger: 'blur' },
        // involvedShop: { required: true, message: '请选择门店', trigger: 'blur' },
        price: { required: true, message: '请选择商品价格', trigger: 'change' },
        games: { required: true, message: '请选择局数', trigger: 'change' },
        saleType: { required: true, message: '请选择销售形式', trigger: 'change', type: 'number' }
      },
      gatherPriceList: [], // 收款项分类
      involvedShopList: [], // 所属门店列表
      priceList: [],
      gamesList: [],
      saleTypeList: [
        { value: 0, label: '支持组合' },
        { value: 1, label: '不支持组合' }
      ],
      columns: [
        {
          title: '参数类型',
          slot: 'type'
        },
        {
          title: '录入参数',
          slot: 'paramter'
        }
      ],
      tableData: [],
      formValidate3: {
        relateParam: '',
        loadImg: ''
      },
      ruleValidate3: {},
      styles: {
        display: 'block'
      }
    }
  },
  methods: {
    changeprice () {
      this.changeNum()
    },
    changeNum () {
      // 如果用户第一位输入的是小数点，则重置输入框内容
      if (this.formValidate2.salesPrice !== '' && this.formValidate2.salesPrice.substring(0, 1) === '.') {
        this.formValidate2.salesPrice = ''
      }
      this.formValidate2.salesPrice = this.formValidate2.salesPrice.replace(/^0*(0\.|[1-9])/, '$1')// 粘贴不生效
      this.formValidate2.salesPrice = this.formValidate2.salesPrice.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
      this.formValidate2.salesPrice = this.formValidate2.salesPrice.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
      this.formValidate2.salesPrice = this.formValidate2.salesPrice.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      this.formValidate2.salesPrice = this.formValidate2.salesPrice.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
      if (this.formValidate2.salesPrice.indexOf('.') < 0 && this.formValidate2.salesPrice !== '') { // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (this.formValidate2.salesPrice.substring(0, 1) === '0' && this.formValidate2.salesPrice.length === 2) {
          this.formValidate2.salesPrice = this.formValidate2.salesPrice.substring(1, this.formValidate2.salesPrice.length)
        }
      }
      if (this.formValidate2.salesPrice > 999999) {
        this.formValidate2.salesPrice = this.formValidate2.salesPrice.substring(0, 6)
      }
    },
    priceBlur () {
      this.formValidate2.salesPrice = this.formValidate2.salesPrice + ''
      this.formValidate2.salesPrice = this.formValidate2.salesPrice.replace(/[^\d.]/g, '')
      if (this.formValidate2.salesPrice === '') {
        this.formValidate2.salesPrice = ''
      } else if (this.formValidate2.salesPrice.indexOf('.') === -1) {
        this.formValidate2.salesPrice = this.formValidate2.salesPrice + '.00'
      } else if (this.formValidate2.salesPrice.indexOf('.')) {
        let ste = this.formValidate2.salesPrice.substring(this.formValidate2.salesPrice.indexOf('.') + 1)
        if (!ste) {
          this.formValidate2.salesPrice = this.formValidate2.salesPrice + '00'
        }
        if (ste.length === 1) {
          this.formValidate2.salesPrice = this.formValidate2.salesPrice + '0'
        } if (ste.length > 2) {
          this.formValidate2.salesPrice = this.formValidate2.salesPrice.substring(0, this.formValidate2.salesPrice.indexOf('.') + 3)
        }
      }
    },
    // 删除
    ok (idx) {
      this.formValidate2.selectedMeal.splice(idx, 1)
    },
    // 取消
    cancel () {

    },
    selectListd (data) {
      this.formValidate2.involvedShop = data.id
      // this.$refs.formValidate.validate((valid) => { })
      this.$refs.formValidate2.validateField('involvedShop', (valid) => { })
    },
    // 获取详情
    getDetail () {
      getGoodsDetail({
        merchantId: this.$store.state.user.merchantId,
        skuId: this.$route.params.id
      }).then(res => {
        if (res.data.status === 200) {
          let result = res.data.data
          this.formValidate1.involvedType = res.data.data.goodsKindList[0].typeCode
          this.editGoodsKindList = res.data.data.goodsKindList
          this.categoryId = res.data.data.categoryId
          this.parentCategoryName = res.data.data.parentCategoryName
          let index
          index = this.firstList.findIndex(ele => ele.categoryName === this.parentCategoryName)
          this.active = index
          this.$refs.setion.scrollTop = index * 32
          // 修改 ---徐香君
          if (this.copyDisable) {
            this.formValidate2.skuName = result.skuName
            this.formValidate2.barcode = result.barcode
          }
          this.formValidate2.goodsDesc = result.goodsDesc
          this.formValidate2.remark = result.remark
          this.formValidate2.goodsUnit = result.goodsUnit
          this.formValidate2.keywords = result.keywords
          this.formValidate2.subTitle = result.subTitle
          this.formValidate2.skuId = result.skuId
          this.formValidate2.relateType = result.goodsKindList[0].typeName
          if (result.goodsKindList[0].typeCode === '01' || result.goodsKindList[0].typeCode === '02') {
            this.formValidate2.matchClassify = result.goodsKindList[1].typeCode
          }
          if (result.goodsKindList[0].typeCode === '03') {
            this.formValidate2.businessType = result.goodsKindList[1].typeCode
            this.formValidate2.salesPrice = result.standardPrice + '' || ''
          }
          if (this.formValidate2.matchClassify === '0102') {
            this.formValidate2.tableDataGameCoin = res.data.data.goodsCombo
          }
          if (this.formValidate2.matchClassify === '0104') {
            this.formValidate2.selectedMeal = res.data.data.goodsCombo
            if (!this.copyDisable) {
              kindList({
                merchantId: this.$store.state.user.merchantId,
                level: 3,
                parentId: this.formValidate2.matchClassify
              }).then(kes => {
                if (kes.data.status === 200) {
                  this.mealTypeList = kes.data.data
                } else {
                  this.$Message.error(`${kes.data.error}`)
                }
              })
            }
            this.checkdList = this.formValidate2.selectedMeal.filter(ele => ele.skuName !== '游戏币')
          }
          this.newpackId = result.packageId
          let propertiesArr = result.properties || []
          if (propertiesArr.length > 0) {
            this.oldpackId = propertiesArr[0].packageId
            this.formDynamic.list = propertiesArr.map(item => {
              if (item.inputType === 2) {
                // if (item.propValueId) {
                // console.log('dd', item.propValueId)
                // let arr = item.propValueId.split(',')
                return {
                  propId: item.propId,
                  inputType: item.inputType,
                  value: item.propValueId ? item.propValueId.split(',') : [],
                  notNull: item.notNull,
                  valueId: item.propName,
                  propNameId: item.propNameId,
                  selectList: item.propertyValueList,
                  searchStatus: item.searchStatus
                }
                // }
              } else {
                return {
                  propId: item.propId,
                  inputType: item.inputType,
                  value: item.propValueId ? item.propValueId : item.propValue,
                  notNull: item.notNull,
                  valueId: item.propName,
                  propNameId: item.propNameId,
                  selectList: item.propertyValueList,
                  searchStatus: item.searchStatus
                }
              }
            })
          }
          this.formDynamic.list = this.formDynamic.list.filter(item => item.searchStatus !== 0)
          if (this.newpackId !== this.oldpackId) {
            // console.log(333)
            this.formDynamic.list = []
            porbaoList({
              merchantId: this.$store.state.user.merchantId,
              packageId: this.newpackId
            }).then(dat => {
              if (dat.data.status === 200) {
                if (dat.data.data) {
                  if (dat.data.data.isShow) {
                    propertyList({
                      merchantId: this.$store.state.user.merchantId,
                      packageId: this.newpackId,
                      searchStatus: 1,
                      searchKey: '',
                      sortId: '1'
                    }).then(res => {
                      if (res.data.status === 200) {
                        let dataList = []
                        res.data.data.map(ele => {
                          let obj = { ...ele }
                          dataList.push(obj)
                        })
                        dataList.forEach(ele => {
                          if (ele.inputType === 0) {
                            this.$set(ele, 'propValue', '')
                          }
                        })
                        this.tableData = dataList
                        if (this.tableData.length > 0) {
                          this.tableData.forEach(item => {
                            let data = {
                              inputType: item.inputType,
                              value: '',
                              notNull: item.notNull,
                              valueId: item.propName,
                              propNameId: item.propNameId,
                              searchStatus: item.searchStatus,
                              selectList: []
                            }
                            item.propertyValueList.forEach(ele => {
                              data.selectList = item.propertyValueList
                            })
                            this.formDynamic.list.push(data)
                          })
                        }
                      } else {
                        this.$Message.error(`${res.data.error}`)
                      }
                    })
                  }
                }
              } else {
                this.$Message.error(`${dat.data.error}`)
              }
            })
          }
          porbaoList({
            merchantId: this.$store.state.user.merchantId,
            packageId: this.newpackId
          }).then(dat => {
            if (dat.data.status === 200) {
              if (dat.data.data) {
                if (!dat.data.data.isShow) {
                  this.formDynamic.list = []
                }
              }
            }
          })
          // over
          if (res.data.data.goodsKindList.length === 3) {
            this.formValidate2.mealType = res.data.data.goodsKindList[2].typeName
            if (!this.copyDisable) {
              this.formValidate2.mealType = res.data.data.goodsKindList[2].typeCode
            }
            this.formValidate2.gatherPrice = result.goodsKindList[2].typeCode
          }
          this.propertiesData = res.data.data.properties || []
          this.formValidate2.isShow = res.data.data.goodsType + ''
          propertiesArr.forEach(ele => {
            if (this.propertyList.indexOf(ele.propId) === -1) {
              // 属性
              this.propertyList.push({
                propId: ele.propId,
                propValueId: ele.propValueId,
                propValue: ele.propValue,
                propName: ele.propName,
                propNameId: ele.propNameId
              })
            }
          })
          this.shopId = res.data.data.shopId
          this.uploadList = res.data.data.multimedia
          this.$editorContent = res.data.data.goodsHtml || ''
          this.$editor.txt.html(res.data.data.goodsHtml || '')
          this.formValidate2.price = res.data.data.gameCouponExtra ? res.data.data.gameCouponExtra.priceId : ''// 游戏券价格id
          this.formValidate2.games = res.data.data.gameCouponExtra ? res.data.data.gameCouponExtra.timesId : '' // 游戏券局数id
          this.formValidate2.saleType = res.data.data.gameCouponExtra ? res.data.data.gameCouponExtra.saleType : ''
          // 对应分类
          kindList({
            merchantId: this.$store.state.user.merchantId,
            level: 2,
            parentId: this.formValidate1.involvedType
          }).then(kes => {
            if (kes.data.status === 200) {
              this.matchClassifyList = kes.data.data
              this.businessTypeList = kes.data.data
            } else {
              this.$Message.error(`${kes.data.error}`)
            }
          })
          if (this.formValidate2.businessType === '0301') {
            kindList({
              merchantId: this.$store.state.user.merchantId,
              level: 3,
              parentId: this.formValidate2.businessType
            }).then(kes => {
              if (kes.data.status === 200) {
                this.gatherPriceList = kes.data.data
              } else {
                this.$Message.error(`${kes.data.error}`)
              }
            })
          }
          // 展示分类
          shopCategoryList({
            merchantId: this.$store.state.user.merchantId,
            parentCategoryId: (this.firstList[index] || {}).categoryId,
            isShow: 1
          }).then(resd => {
            if (resd.data.status === 200) {
              this.secondList = resd.data.data.categories
              let index2 = this.secondList.findIndex(ele => ele.categoryId === this.categoryId)
              this.active2 = index2
              if (this.secondList.length * 32 > 211) {
                // if (index2 * 32 > 222) {
                let len = (index2 + 1) * 32 - 222
                if (len > 0) {
                  this.$nextTick(() => {
                    this.$refs.setionTwo.scrollTop = len
                  })
                }
              }
              this.packageId = (this.secondList[index2] || {}).packageId
              this.categoryName = this.secondList[index2].categoryName
              this.formValidate1.involvedClassify = [this.firstList[index], this.secondList[index2]]
            } else {
              this.$Message.error(`${resd.data.error}`)
            }
          })
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 修改属性值
    // 获取属性列表
    editPropertyList () {
      this.formDynamic.list = []
      porbaoList({
        merchantId: this.$store.state.user.merchantId,
        packageId: this.packageId
      }).then(dat => {
        if (dat.data.status === 200) {
          if (dat.data.data) {
            if (dat.data.data.isShow) {
              propertyList({
                merchantId: this.$store.state.user.merchantId,
                packageId: this.packageId,
                searchStatus: 1,
                searchKey: '',
                sortId: '1'
              }).then(res => {
                if (res.data.status === 200) {
                  let dataList = []
                  res.data.data.map(ele => {
                    let obj = { ...ele }
                    dataList.push(obj)
                  })
                  dataList.forEach(ele => {
                    if (ele.inputType === 0) {
                      this.$set(ele, 'propValue', '')
                    }
                  })
                  this.tableData = dataList
                  if (this.tableData.length > 0) {
                    this.tableData.forEach(item => {
                      let data = {
                        inputType: item.inputType,
                        value: '',
                        notNull: item.notNull,
                        valueId: item.propName,
                        propNameId: item.propNameId,
                        searchStatus: item.searchStatus,
                        selectList: []
                      }
                      item.propertyValueList.forEach(ele => {
                        data.selectList = item.propertyValueList
                      })
                      this.formDynamic.list.push(data)
                    })
                  }
                }
              })
            }
          }
        } else {
          this.$Message.error(`${dat.data.error}`)
        }
      })
    },
    // 获取属性列表
    getPropertyList () {
      propertyList({
        merchantId: this.$store.state.user.merchantId,
        packageId: this.packageId,
        searchStatus: 1,
        searchKey: ''
      }).then(res => {
        if (res.data.status === 200) {
          let dataList = []
          res.data.data.map(ele => {
            let obj = { ...ele }
            dataList.push(obj)
          })
          dataList.forEach(ele => {
            if (ele.inputType === 0) {
              this.$set(ele, 'propValue', '')
            }
          })
          this.tableData = dataList
          if (this.tableData.length > 0) {
            this.tableData.forEach(item => {
              let data = {
                inputType: item.inputType,
                value: '',
                notNull: item.notNull,
                valueId: item.propName,
                propNameId: item.propNameId,
                selectList: []
              }
              item.propertyValueID.forEach(ele => {
                data.selectList = item.propertyValueID
              })

              this.formDynamic.list.push(data)

              this.formDynamic.list.forEach(ele => {
                let ids = []
                this.propertiesData.forEach(elt => {
                  if (!elt.propValueId) {
                    if (ele.propNameId === elt.propNameId) {
                      ele.value = elt.propValue
                      this.$set(ele, 'propId', elt.propId)
                    }
                  }
                  if (ele.propNameId === elt.propNameId) {
                    if (ele.inputType === 2) {
                      if (ids.indexOf(elt.propValueId) === -1) {
                        ids.push(elt.propValueId)
                      }
                      this.$set(ele, 'propId', elt.propId)
                      ele.value = ids
                    } else {
                      this.$set(ele, 'propId', elt.propId)
                      ele.value = elt.propValueId
                    }
                  }
                })
              })
            })
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    ketupsort (sort, row, index) {
      var res = String(sort)
      if (sort.length === 1) {
        res = sort.replace(/[^1-9]/g, '')
      } else {
        res = sort.replace(/^(0+)|[^\d]+/g, '')
      }
      row.num = res
      this.$set(this.formValidate2.selectedMeal[index], 'num', res)
    },
    blursort (e, sort, index) {
      e.isshow = false
      let res = String(sort)
      if (sort.length === 1) {
        res = res.replace(/[^0-9]/g, '')
      } else {
        res = res.replace(/^(0+)|[^\d]+/g, '')
      }
      e.num = res
      this.$set(this.formValidate2.selectedMeal[index], 'num', res || '1')
    },
    selectsort (row, idx) {
      // this.selectedIndex = idx
      // row.sortShow = true
      this.formValidate2.selectedMeal.forEach(ele => {
        this.$set(ele, 'isshow', false)
      })
      this.$set(this.formValidate2.selectedMeal[idx], 'isshow', true)
      this.$nextTick(() => {
        this.$refs.inputValidate.focus()
      })
    },
    ketupsort2 (sort, row, index) {
      var res = String(sort)
      if (sort.length === 1) {
        res = sort.replace(/[^1-9]/g, '')
      } else {
        res = sort.replace(/^(0+)|[^\d]+/g, '')
      }
      row.num = res
      this.$set(this.formValidate2.tableDataGameCoin[index], 'num', res)
    },
    blursort2 (e, sort, index) {
      e.isshow = false
      let res = String(sort)
      if (sort.length === 1) {
        res = res.replace(/[^1-9]/g, '')
      } else {
        res = res.replace(/^(0+)|[^\d]+/g, '')
      }
      e.num = res
      this.$set(this.formValidate2.tableDataGameCoin[index], 'num', res || '1')
    },
    // 移除图片
    removelist (idx) {
      this.uploadList.splice(idx, 1)
    },
    selectsort2 (row, idx) {
      // this.selectedIndex = idx
      // row.sortShow = true
      this.formValidate2.tableDataGameCoin.forEach(ele => {
        this.$set(ele, 'isshow', false)
      })
      this.$set(this.formValidate2.tableDataGameCoin[idx], 'isshow', true)
      this.$nextTick(() => {
        this.$refs.inputValidated.focus()
      })
    },
    selectinputtype (val, item) {
      // 属性
      if (this.propertyList.indexOf(item.propNameId) === -1) {
        this.propertyList.push({
          propId: item.propId,
          propValue: item.value,
          propName: item.valueId,
          propNameId: item.propNameId
        })
      }
    },
    selcteinput (val, item) {
      // 属性
      if (!Array.isArray(val)) {
        if (this.propertyList.indexOf(item.propId) === -1) {
          this.propertyList.push({ ...item.selectList.filter(ele => ele.propValueId === val)[0], propId: item.propId })
        }
      } else {
        item.selectList.forEach(ele => {
          val.forEach((eld) => {
            if (ele.propValueId === eld) {
              if (this.propertyList.indexOf(item.propId) === -1) {
                this.propertyList.push({ ...ele, propId: item.propId })
              }
            }
          })
        })
      }
    },
    // 获取门店列表
    getShopList () {
      let Disable = !this.copyDisable
      // console.log(Disable)
      getOrgAllTree({
        'merchantId': this.$store.state.user.merchantId,
        'orgType': 1,
        perms: 'moms:product:productupdate',
        id: Disable ? this.$store.state.user.orgId : this.shopId,
        status: 1
      }).then(res => {
        if (res.data.status === 200) {
          this.options = [res.data.data]
          this.formValidate2.involvedShop = this.shopId
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 获取游戏劵列表配置
    getConfigList () {
      configList({
        merchantId: this.$store.state.user.merchantId,
        configType: '1',
        offset: 0,
        limit: 9999
      }).then(res => {
        if (res.data.status === 200) {
          this.priceList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
      configList({
        merchantId: this.$store.state.user.merchantId,
        configType: '2',
        offset: 0,
        limit: 9999
      }).then(res => {
        if (res.data.status === 200) {
          this.gamesList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 获取分类列表
    getkindList () {
      kindList({
        merchantId: this.$store.state.user.merchantId,
        level: 1
      }).then(res => {
        if (res.data.status === 200) {
          this.involvedTypeList = res.data.data
          this.relateTypeList = res.data.data
          this.getshopCategoryList()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 获取一级分类
    seletcType (val) {
      this.involvedTypeList.forEach((ele, index) => {
        if (val === ele.typeCode) {
          this.seletIndex = index
        }
      })
      this.typeIDOne = val
      this.goodsKindList[0] = { id: val, level: 1 }
      kindList({
        merchantId: this.$store.state.user.merchantId,
        level: 2,
        parentId: val
      }).then(res => {
        if (res.data.status === 200) {
          this.matchClassifyList = res.data.data
          this.businessTypeList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 获取三级分类
    seletcType2 (val) {
      this.matchClassifyList.forEach((ele, index) => {
        if (val === ele.id) {
          this.seletIndex2 = index
        }
      })
      this.typeIDTwo = val
      this.goodsKindList[1] = { id: val, level: 2 }
      kindList({
        merchantId: this.$store.state.user.merchantId,
        level: 3,
        parentId: val
      }).then(res => {
        if (res.data.status === 200) {
          this.mealTypeList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
      if (this.seletIndex2 === 1) {
        goodsList({
          merchantId: this.$store.state.user.merchantId,
          goodsStatus: 1,
          goodsKindIdList: ['01-0101'],
          offset: 0,
          limit: 9999
        }).then(res => {
          if (res.data.status === 200) {
            let goods = res.data.data.goods
            this.formValidate2.tableDataGameCoin = []
            goods.forEach(ele => {
              this.$set(ele, 'num', 1)
              this.$set(ele, 'isshow', false)
              this.formValidate2.tableDataGameCoin.push({ ...ele })
            })
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      }
    },
    // 获取分类列表
    getshopCategoryList () {
      shopCategoryList({
        merchantId: this.$store.state.user.merchantId,
        isShow: 1
      }).then(res => {
        if (res.data.status === 200) {
          this.firstList = res.data.data.categories || []
          this.getDetail()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 套餐
    selectmealType (val) {
      this.mealTypeList.forEach((ele, index) => {
        if (val === ele.typeCode) {
          this.seletIndex3 = index
        }
      })
      // if (val === '010401' || val === '010402') {
      let obj = { '010401': ['01-0101'], '010402': ['01-0101', '01-0103'], '010403': ['01-0101'] }
      goodsList({
        merchantId: this.$store.state.user.merchantId,
        goodsStatus: 1,
        goodsKindIdList: obj[val],
        offset: 0,
        skuName: '',
        limit: 9999
      }).then(res => {
        if (res.data.status === 200) {
          let goods = res.data.data.goods
          goods = res.data.data.goods
          // this.$nextTick(() => {
          if (val === '010401' || val === '010403') {
            this.formValidate2.selectedMeal = goods.map(ele => {
              return { ...ele, num: 1, isshow: false, checked: false }
            }).filter(ele => ele.skuName === '游戏币')
            // this.checkdList = this.formValidate2.selectedMeal
          }
          if (val === '010402') {
            this.formValidate2.selectedMeal = goods.map(ele => {
              return { ...ele, num: 1, isshow: false, checked: false }
            }).filter(ele => ele.skuName === '游戏币' || ele.skuName === '会员卡')
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
      // } else {
      this.goodsKindList[2] = { id: val, level: 3 }
    },
    // 添加游戏劵
    addmeal () {
      this.modalShow = true
    },
    // 提交步骤一
    submitOne () {
      this.$refs.formValidate1.validate((valid) => {
        if (valid) {
          if (this.current === 3) {
            this.current = 0
          } else {
            this.current += 1
          }
        }
      })
    },
    // 游戏劵取消
    selctshopCancel () {
      this.modalShow = false
    },
    // 游戏劵确认
    volumeSet (val) {
      this.checkdList = val
      if (this.formValidate2.selectedMeal.length === 2) {
        this.formValidate2.selectedMeal.splice(1, 1)
        this.checkdList.forEach(ele => {
          let arr = this.formValidate2.selectedMeal.map(item => item.skuName)
          if (arr.indexOf(ele.skuName) === -1) {
            this.formValidate2.selectedMeal.push(ele)
          }
        })
      } else {
        this.checkdList.forEach(ele => {
          let arr = this.formValidate2.selectedMeal.map(item => item.skuName)
          if (arr.indexOf(ele.skuName) === -1) {
            this.formValidate2.selectedMeal.push(ele)
          }
        })
      }
      this.modalShow = false
    },
    // 设置主图
    setmaster (idx, item) {
      let data = item
      this.uploadList.splice(idx, 1)
      this.uploadList.unshift(data)
    },
    // 选择一级分类商品
    selectFirstClassify (first, idx) {
      this.active = idx
      this.active2 = 0
      this.formValidate1.involvedClassify = ['', '']
      this.formValidate1.involvedClassify[0] = first
      this.parentCategoryName = first.categoryName
      shopCategoryList({
        merchantId: this.$store.state.user.merchantId,
        parentCategoryId: first.categoryId,
        isShow: 1
      }).then(res => {
        if (res.data.status === 200) {
          this.secondList = res.data.data.categories || []
          this.formValidate1.involvedClassify[1] = this.secondList[this.active2]
          this.packageId = this.secondList[this.active2].packageId
          this.categoryId = this.secondList[this.active2].categoryId
          if (this.packageId) {
            this.editPropertyList()
          } else {
            this.formDynamic.list = []
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 营业项选择
    selecebusinessType (val) {
      this.businessTypeList.forEach((ele, index) => {
        if (val === ele.id) {
          this.seletIndex4 = index
        }
      })
      this.typeIDTwo = val
      this.goodsKindList[1] = { id: val, level: 2 }
      kindList({
        merchantId: this.$store.state.user.merchantId,
        level: 3,
        parentId: val
      }).then(res => {
        if (res.data.status === 200) {
          // conosle.log('this.gatherPriceList', res.data.data)
          this.gatherPriceList = res.data.data
          // this.involvedTypeList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    selecebusinessType01 (val) {
      this.typeIDThree = val
      this.goodsKindList[2] = { id: val, level: 3 }
    },
    // 选择二级分类商品
    selectSecondClassify (second, idx) {
      this.active2 = idx
      this.formValidate1.involvedClassify[1] = second
      this.categoryName = second.categoryName
      this.packageId = second.packageId
      if (this.packageId) {
        this.editPropertyList()
      } else {
        this.formDynamic.list = []
      }
      this.categoryId = second.categoryId
    },
    // 步骤二中的上一步
    skipTwo () {
      this.current--
    },
    // 滚动
    scrollDs () {
    },
    // 步骤二提交
    submitTwo () {
      this.$refs.formValidate2.validate((valid) => {
        if (valid) {
          if (this.current === 3) {
            this.current = 0
          } else {
            this.current += 1
          }
        }
      })
    },
    // 步骤三中的上一步
    skipThree () {
      this.current--
    },
    // 步骤三提交
    submitThree () {
      // if()
      if (this.copyDisable) {
        this.$refs.formValidate3.validate((valid) => {
          if (valid) {
            this.goodsComboList = []
            if (this.formValidate2.matchClassify === '0102') {
              this.formValidate2.tableDataGameCoin.forEach(ele => {
                this.goodsComboList.push({
                  subSkuId: ele.hasOwnProperty('subSkuId') ? ele.subSkuId : ele.skuId,
                  num: ele.num,
                  goodsComboId: ele.goodsComboId
                })
              })
            }
            if (this.formValidate2.matchClassify === '0104') {
              // this.formValidate2.selectedMeal = res.data.data.goodsCombo
              this.formValidate2.selectedMeal.forEach(ele => {
                this.goodsComboList.push({
                  subSkuId: ele.hasOwnProperty('subSkuId') ? ele.subSkuId : ele.skuId,
                  num: ele.num,
                  goodsComboId: ele.hasOwnProperty('goodsComboId') ? ele.goodsComboId : ''
                })
              })
            }
            this.multUrlList = []
            this.uploadList.forEach(ele => {
              if (ele.hasOwnProperty('multId')) {
                this.multUrlList.push({
                  multUrl: ele.multUrl,
                  multType: 0,
                  multId: ele.multId
                })
              } else {
                this.multUrlList.push({
                  multUrl: ele.multUrl,
                  multType: 0
                })
              }
            })
            // 修改时间2019.10.29---徐香君
            if (this.typeIDThree) {
              this.editGoodsKindList.splice(2, 1)
              this.editGoodsKindList.push({ typeCode: this.typeIDThree, level: 3 })
            }
            let paramObj = {
              merchantId: this.$store.state.user.merchantId,
              shopId: this.formValidate2.involvedShop,
              skuName: this.formValidate2.skuName,
              skuId: this.$route.params.id,
              categoryId: this.categoryId,
              barcode: this.formValidate2.barcode,
              standardPrice: this.formValidate2.salesPrice,
              goodsUnit: this.formValidate2.goodsUnit,
              keywords: this.formValidate2.keywords,
              goodsDesc: this.formValidate2.goodsDesc,
              goodsType: this.formValidate2.isShow,
              updater: this.$store.state.user.userId,
              updaterName: this.$store.state.user.userName,
              subTitle: this.formValidate2.subTitle,
              remark: this.formValidate2.remark,
              orgName: this.$store.state.user.ororgName,
              goodsKindList: this.editGoodsKindList, // 商品业务类别,
              multUrlList: this.multUrlList,
              // propertyList: this.propertyList,
              propertyList: this.formDynamic.list.map(item => {
                if (item.inputType === 2) {
                  return {
                    inputType: item.inputType,
                    propNameId: item.propNameId,
                    propName: item.valueId,
                    propValueId: item.value,
                    propId: item.propId
                  }
                } else {
                  return {
                    inputType: item.inputType,
                    propNameId: item.propNameId,
                    propName: item.valueId,
                    propValueId: [item.value],
                    propId: item.propId
                  }
                }
              }),
              goodsComboList: this.goodsComboList,
              goodsHtml: this.$editor.txt.html(),
              priceId: this.formValidate2.price, // 游戏券价格id
              timesId: this.formValidate2.games, // 游戏券局数id
              saleType: this.formValidate2.saleType, // 游戏券销售形式
              status: 1,
              categoryName: this.categoryName,
              parentCategoryName: this.parentCategoryName
            }
            // over
            if ((this.$editor.txt.html() || '').length - 7 > 300) {
              this.$Message.error('商品详情文字不能大于300字')
              return false
            }
            if (this.formDynamic.list.length > 0) {
              this.$refs.formDynamic.validate(valid => {
                if (valid) {
                  editGoodsList(paramObj).then(res => {
                    if (res.data.status === 200) {
                      this.$Message.success('编辑成功')
                      if (this.current === 3) {
                        this.current = 0
                      } else {
                        this.current += 1
                      }
                    } else {
                      this.$Message.error(`${res.data.error}`)
                    }
                  })
                }
              })
            } else {
              editGoodsList(paramObj).then(res => {
                if (res.data.status === 200) {
                  this.$Message.success('编辑成功')
                  if (this.current === 3) {
                    this.current = 0
                  } else {
                    this.current += 1
                  }
                } else {
                  this.$Message.error(`${res.data.error}`)
                }
              })
            }
          }
        })
      } else {
        // if (this.formValidate2.matchClassify === '0104') {
        //   this.goodsComboList = this.goodsComboList2
        // }
        // if (this.formValidate2.matchClassify === '0102') {
        //   this.goodsComboList = this.goodsComboList1
        // }
        if (this.formValidate1.involvedType === '01' && this.formValidate2.matchClassify !== '0104') {
          this.goodsKindList.splice(2, 1)
        }
        if (this.formValidate1.involvedType === '03' && this.formValidate2.businessType !== '0301') {
          this.goodsKindList.splice(2, 1)
        }
        if ((this.$editor.txt.html() || '').length - 7 > 300) {
          this.$Message.error('商品详情文字不能大于300字')
          return false
        }
        this.$refs.formValidate3.validate(valid => {
          if (valid) {
            this.goodsComboList = []
            if (this.formValidate2.matchClassify === '0102') {
              this.formValidate2.tableDataGameCoin.forEach(ele => {
                this.goodsComboList.push({
                  subSkuId: ele.hasOwnProperty('subSkuId') ? ele.subSkuId : ele.skuId,
                  num: ele.num
                })
              })
            }
            if (this.formValidate2.matchClassify === '0104') {
              // this.formValidate2.selectedMeal = res.data.data.goodsCombo
              this.formValidate2.selectedMeal.forEach(ele => {
                this.goodsComboList.push({
                  subSkuId: ele.hasOwnProperty('subSkuId') ? ele.subSkuId : ele.skuId,
                  num: ele.num
                })
              })
            }
            this.multUrlList = []
            this.uploadList.forEach(ele => {
              this.multUrlList.push({
                multUrl: ele.multUrl,
                multType: 0
              })
            })
            if (this.formDynamic.list.length > 0) {
              this.$refs.formDynamic.validate(valid => {
                if (valid) {
                  // 修改时间2019.10.29---徐香君
                  // this.goodsKindList = []
                  let paramObj = {
                    merchantId: this.$store.state.user.merchantId,
                    shopId: this.formValidate2.involvedShop,
                    skuName: this.formValidate2.skuName,
                    spuName: this.formValidate2.skuName,
                    categoryId: this.categoryId,
                    barcode: this.formValidate2.barcode,
                    goodsUnit: this.formValidate2.goodsUnit,
                    keywords: this.formValidate2.keywords,
                    goodsDesc: this.formValidate2.goodsDesc,
                    goodsType: this.formValidate2.isShow,
                    creator: this.$store.state.user.userId,
                    creatorName: this.$store.state.user.userName,
                    subTitle: this.formValidate2.subTitle,
                    remark: this.formValidate2.remark,
                    orgName: this.$store.state.user.ororgName,
                    standardPrice: this.formValidate2.salesPrice,
                    goodsKindList: this.goodsKindList.length ? this.goodsKindList : this.editGoodsKindList.map(ele => {
                      return {
                        id: ele.typeCode,
                        level: ele.level
                      }
                    }),
                    multUrlList: this.multUrlList,
                    propertyList: this.formDynamic.list.map(item => {
                      if (item.inputType === 2) {
                        return {
                          inputType: item.inputType,
                          propNameId: item.propNameId,
                          propName: item.valueId,
                          propValueId: item.value
                        }
                      } else {
                        return {
                          inputType: item.inputType,
                          propNameId: item.propNameId,
                          propName: item.valueId,
                          propValueId: [item.value]
                        }
                      }
                    }),
                    goodsComboList: this.goodsComboList,
                    goodsHtml: this.$editor.txt.html(),
                    priceId: this.formValidate2.price, // 游戏券价格id
                    timesId: this.formValidate2.games, // 游戏券局数id
                    saleType: this.formValidate2.saleType, // 游戏券销售形式
                    status: 1 // 游戏券：0-待审核，1-审核通过，2-审核未通过，3-已上架，4-已下架，5-已删除
                  }
                  // over
                  creatGoodsList(paramObj).then(res => {
                    if (res.data.status === 200) {
                      this.$Message.success('复制成功')
                      if (this.current === 3) {
                        this.current = 0
                      } else {
                        this.current += 1
                      }
                    } else {
                      this.$Message.error(`${res.data.error}`)
                    }
                  })
                }
              })
            } else {
              // this.goodsKindList = []
              let paramsObj = {
                merchantId: this.$store.state.user.merchantId,
                shopId: this.formValidate2.involvedShop,
                skuName: this.formValidate2.skuName,
                spuName: this.formValidate2.skuName,
                categoryId: this.categoryId,
                barcode: this.formValidate2.barcode,
                goodsUnit: this.formValidate2.goodsUnit,
                keywords: this.formValidate2.keywords,
                goodsDesc: this.formValidate2.goodsDesc,
                goodsType: this.formValidate2.isShow,
                creator: this.$store.state.user.userId,
                creatorName: this.$store.state.user.userName,
                subTitle: this.formValidate2.subTitle,
                remark: this.formValidate2.remark,
                orgName: this.$store.state.user.ororgName,
                goodsKindList: this.goodsKindList.length ? this.goodsKindList : this.editGoodsKindList.map(ele => {
                  return {
                    id: ele.typeCode,
                    level: ele.level
                  }
                }), // 商品业务类别,
                multUrlList: this.multUrlList,
                standardPrice: this.formValidate2.salesPrice,
                goodsComboList: this.goodsComboList,
                goodsHtml: this.$editor.txt.html(),
                priceId: this.formValidate2.price, // 游戏券价格id
                timesId: this.formValidate2.games, // 游戏券局数id
                saleType: this.formValidate2.saleType, // 游戏券销售形式
                status: 1 // 游戏券：0-待审核，1-审核通过，2-审核未通过，3-已上架，4-已下架，5-已删除
              }
              creatGoodsList(paramsObj).then(res => {
                if (res.data.status === 200) {
                  this.$Message.success('复制成功')
                  if (this.current === 3) {
                    this.current = 0
                  } else {
                    this.current += 1
                  }
                } else {
                  this.$Message.error(`${res.data.error}`)
                }
              })
            }
          }
        })
      }
    },
    keyup () {
      this.formValidate2.barcode = this.formValidate2.barcode.replace(/\s+/g, '')
      this.formValidate2.barcode = this.formValidate2.barcode.replace(/[^a-z0-9A-Z]/g, '')
    },
    keyupskuName () {
      this.formValidate2.skuName = this.formValidate2.skuName.replace(/\s+/g, '')
      this.formValidate2.skuName = this.formValidate2.skuName.replace(/[^\w\u4E00-\u9FA5]/g, '')
    },
    keyupsubTitle () {
      this.formValidate2.subTitle = this.formValidate2.subTitle.replace(/\s+/g, '')
      // this.formValidate2.subTitle = this.formValidate2.subTitle.replace(/[^\w\u4E00-\u9FA5]/g, '')
    },
    handleBeforeUpload () {
      const check = this.uploadList.length < 5
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传5张图片'
        })
      }
      return check
    },
    handleSuccess (response, file, fileList) {
      if (file.response.full_img_url) {
        let imgUrl = {
          name: file.name,
          multUrl: file.response.full_img_url
        }
        this.uploadList.push(imgUrl)
        if (this.uploadList.length > 5) {
          this.uploadList.splice(5, this.uploadList.length - 5)
        }
      }
    },
    handleFormatError () {
      this.$Notice.warning({
        title: '格式支持上传jpg、png'
      })
    },
    handleMaxSize () {
      this.$Notice.warning({
        title: '图片限制最大5m'
      })
    },
    // 返回商品列表
    skipList () {
      clearInterval(this.timer)
      this.handleReset()
    },
    // 关闭标签
    handleReset () {
      this.$store.commit('closeTag', this.$route)
      // this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      if (this.$store.state.app.tagNavList[this.$store.state.app.tagNavList.length - 1].name !== 'commodity_list') {
        this.$nextTick(() => {
          localStorage.setItem('creatidt', 1)
          this.$router.push({
            name: 'commodity_list',
            params: { creatidt: 1 }
          })
        })
      }
    },
    // 新增分类
    addcategroy () {
      this.$router.push({ name: 'classify_create' })
    }
  },
  created () {
    // this.getDetail()
    if (this.$route.query.copyids) {
      this.copyids = this.$route.query.copyids
    }
    this.getkindList()
    // this.formValidate1.involvedClassify = [this.firstList[0], this.secondList[0]]
  },
  mounted () {
    this.createEditor(this.$refs.addEditor)
    this.box = this.$refs.setion
    this.box.addEventListener('scroll', () => {
    }, false)
    this.box2 = this.$refs.setionTwo
    this.box2.addEventListener('scroll', () => {
      // console.log(11)
      // console.log(this.$refs.setionTwo.scrollTop)
    }, false)
  }
}
</script>

<style lang="less">
#commodity_edit {
  .third-level {
    .ivu-form-item-error-tip {
      left: 203px;
    }
    .ivu-form-item-label {
      width: 200px !important;
    }
  }
  .rich-editor {
    width: 700px;
    text-align: left;
    .w-e-toolbar {
      flex-wrap: wrap;
    }
  }
  .prev {
    width: 31% !important;
  }
  .complate {
    width: 7% !important;
  }
  .content-style {
    margin: 0 auto !important;
  }
  .title {
    display: flex;
    margin-bottom: 30px;
    p {
      width: 8px;
      height: 20px;
      background: #2d8cf0;
      margin-right: 10px;
    }
  }
  .classify-content {
    display: flex;
    align-items: center;
    .section-content {
      width: 230px;
      height: 263px;
      border: 1px solid #e8eaec;
      border-radius: 3px;
    }
    p {
      background: #f9fafc;
      border-bottom: 1px solid #e8eaec;
      padding: 0 8px;
    }
    ul {
      margin-top: 5px;
      li {
        list-style: none;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .selected {
      background: #f8f8f9;
      color: #2d8cf0;
    }
  }
}
</style>
